<template>
    <div class="left_nav">
        <div class="top_title">
            <h2> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>外卖商家中心
            </h2>
        </div>
        <el-menu router unique-opened :default-active="$route.path" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">

            <template v-for="(v,i) in routers">
            <!-- 一级菜单 -->
            <el-menu-item :index="v.path" :key="i" v-if="v.children.length<=1">
                <i :class="v.icon"></i>
                <span slot="title">{{v.meta.title}}</span>
            </el-menu-item>


            <!-- 二级菜单 -->

                <el-submenu :index="v.path" v-else :key="i">
                    <template slot="title">
                        <i :class="v.icon"></i>
                        <span>{{v.meta.title}}</span>
                      
                    </template>
                    <el-menu-item v-for="(v2,i2) in v.children.filter(v3=>v3.isMenu)" :index="v2.path" :key="i2">{{v2.meta.title}}</el-menu-item>
                </el-submenu>

      
            </template>


        </el-menu>
    </div>
</template>

<script>
import {showRouter} from '@/router/index.js'
export default {
    data() {
        return{
            routers:showRouter().filter(v=>v.isMenu)
        }
    },
    // created(){
    //     console.log(this.routers);
    // }

}
</script>

<style lang="less" scoped>
.el-container {

    .el-submenu{
    width: 100%;
}
    .left_nav {

        .el-menu {
            border: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    
    .el-submenu__title{
            width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
        }
        }
        .el-menu-item{
            width: 100%;
            background-color: salmon;

        }
        .top_title {
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #fff;

            h2 {
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 18px;
                font-weight: bold;
                color: #fff;
            }



        }

    }
    .el-submenu__title{
            width: 100%;
    display: flex ;
    align-items: center;
    justify-content: flex-start;
        }
}
</style>